<template>
    <view class="l-sticky-item l-class">
        <view
            class="l-sticky-item-header-wrapper l-header-wrapper-class"
            :style="'height:' + (isFixedTop && stickyItemWrapperHeight ? stickyItemWrapperHeight + 'px' : 'auto')"
        ></view>
        <view
            :style="(mode === 'js' ? (isFixedTop ? 'position:fixed;' : '') : '') + ' top:' + top + 'rpx'"
            :class="
                'l-sticky-item-header l-sticky-item-header' +
                (mode === 'js' ? (isFixedTop ? '-fixed l-header-sticky-class' : '') : mode === 'css' ? '-sticky l-header-sticky-class' : '') +
                ' l-header-class'
            "
        >
            <slot name="header"></slot>
        </view>
        <view class="l-sticky-item-body l-body-class">
            <slot name="body"></slot>
        </view>
    </view>
</template>

<script>
import nodeUtil from '../core/utils/node-util';
export default {
    unicomGroup: ['sticky'],
    data() {
        return {
            mode: void 0,
            index: void 0,
            isFixedTop: false,
            stickyItemTop: 0,
            stickyItemHeight: 0,
            stickyItemWrapperHeight: void 0
        };
    },
    externalClasses: ['l-class', 'l-header-wrapper-class', 'l-header-class', 'l-header-sticky-class', 'l-body-class'],
    options: {
        multipleSlots: true
    },
    relations: {
        '../sticky/index': {
            type: 'parent'
        }
    },
    props: {
        top: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            const t = this.getParentComponent().data.mode;
            this.setData({
                mode: t
            });
        },

        updateStickyItemPosition(t) {
            const e = this.getParentComponent();
            const { index: i, stickyItemTop: s, stickyItemHeight: o, top: a } = this;
            const n = t > s - a && t < o + s - a;
            if (this.isFixedTop !== n) {
                if (n) {
                    e.$emit('linsticky', {
                        detail: {
                            index: i
                        }
                    });
                } else {
                    e.$emit('linunsticky', {
                        detail: {
                            index: i
                        }
                    });
                }
                this.setData({
                    isFixedTop: n
                });
            }
        },

        async updateStickyItemBaseData(t) {
            this.setData({
                index: t
            });
            const e = this.getParentComponent().data.scrollTop;
            const i = await nodeUtil.getNodeRectFromComponent(this, '.l-sticky-item');
            this.setData({
                stickyItemTop: i.top + e,
                stickyItemHeight: i.height
            });
            const s = await nodeUtil.getNodeRectFromComponent(this, '.l-sticky-item-header');
            this.setData({
                stickyItemWrapperHeight: s.height
            });
        },

        getParentComponent() {
            const t = this.getRelationNodes('sticky');
            if (0 !== t.length) {
                return t[0];
            }
        }
    },
    created: function () {}
};
</script>
<style>
.l-sticky-item {
    display: flex;
    flex-direction: column;
}
.l-sticky-wrapper {
    overflow: visible;
}
.l-sticky-item-header {
    width: 100%;
}
.l-sticky-item-header-fixed {
    position: fixed;
    top: 0;
}
@supports (position: sticky) {
    .l-sticky-item-header-sticky {
        position: sticky;
    }
}
</style>
